<template>
  <div class="product-box">
    <div class="header">商品</div>
    <div class="product-nav margin-top">
      <img @click="showProduct=true" src="@/assets/image/menu.png" alt="">

      <div class="nav">
        <div @click="active=1" class="item"><p :class="{'active':active===1}">全部商品</p><span v-if="active===1"/>
        </div>
<!--        <div @click="active=2" class="item"><p :class="{'active':active===2}">活动折扣</p><span v-if="active===2"/>-->
<!--        </div>-->
      </div>
      <img src="@/assets/image/search-o.png" alt="">
    </div>
    <div class="product-nav product-top">
      <div class="item-nav center">综合</div>
      <div class="item-nav center">销量
        <img src="@/assets/image/sort.jpeg" alt="">
      </div>
      <div class="item-nav center">价格
        <img src="@/assets/image/sort.jpeg" alt="">
      </div>
      <div class="item-nav center">新品
        <img src="@/assets/image/sort.jpeg" alt="">
      </div>
    </div>
    <div class="product-nav-goods">
      <div v-for="(items,index1) in goods" :key="index1" class="item">
        <div v-if="active===2" class="item-tip">
          <p>1%</p>
          <p>OFF</p>
        </div>
        <img :src="items.image" alt="">
        <p class="item-price">$ {{ items.price }}</p>
        <p class="item-sale">月销量 {{ items.sale }}</p>
        <p class="item-content"> {{ items.content }} </p>
      </div>
    </div>
    <van-popup
            :overlay="false"
            v-model="showProduct"
            position="left"
            closeable
            close-icon-position="top-right"
            :style="{ width: '220px',height:'100vh',margin:'60px 0'}">
      <div class="open-menu">
        <div class="top-title">
          <img src="@/assets/image/menu.png" alt=""> 筛选
        </div>
        <div class="category-list">
          <van-collapse :border="false" v-model="activeName" accordion>
            <van-collapse-item title="饮料酒水" name="1">
              <div class="main">
                <div class="item">矿泉水</div>
                <div class="item">饮料</div>
                <div class="item">果汁</div>
                <div class="item">牛奶</div>
              </div>
            </van-collapse-item>
            <van-collapse-item title="标题2" name="2">内容</van-collapse-item>
            <van-collapse-item title="标题3" name="3">内容</van-collapse-item>
          </van-collapse>
        </div>

      </div>
    </van-popup>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        active: 1,
        showProduct: false,
        activeName: '1',
        goods: [
          {
            id: 1,
            image: 'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
            price: 35.11,
            sale: 200,
            content: 'KwikSafety 北卡罗来纳州夏洛特 THU... '
          },
          {
            id: 2,
            image: 'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
            price: 35.12,
            sale: 200,
            content: 'KwikSafety 北卡罗来纳州夏洛特 THU... '
          },
          {
            id: 3,
            image: 'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
            price: 35.13,
            sale: 200,
            content: 'KwikSafety 北卡罗来纳州夏洛特 THU... '
          },
          {
            id: 4,
            image: 'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
            price: 35.14,
            sale: 200,
            content: 'KwikSafety 北卡罗来纳州夏洛特 THU... '
          },
          {
            id: 5,
            image: 'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
            price: 35.15,
            sale: 200,
            content: 'KwikSafety 北卡罗来纳州夏洛特 THU... '
          },
          {
            id: 6,
            image: 'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
            price: 35.16,
            sale: 200,
            content: 'KwikSafety 北卡罗来纳州夏洛特 THU... '
          },
          {
            id: 7,
            image: 'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
            price: 35.17,
            sale: 200,
            content: 'KwikSafety 北卡罗来纳州夏洛特 THU... '
          },
          {
            id: 8,
            image: 'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
            price: 35.18,
            sale: 200,
            content: 'KwikSafety 北卡罗来纳州夏洛特 THU... '
          },
        ],
      }
    }
  }
</script>

<style scoped lang="scss">
  .product-box {
    width: 100%;
    box-sizing: border-box;
    padding: 0 3%;

    .header {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 999;
      background: #fff;
      height: 45px;
      width: 100%;
      text-align: center;
      line-height: 45px;
      margin: 0 auto;
      color: #323233;
      font-weight: 500;
      font-size: 16px;
    }

    .margin-top {
      margin-top: 60px;
    }

    .product-nav {
      width: 100%;

      padding: 0 3%;
      box-sizing: border-box;
      height: 45px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      img {
        height: 40px;
      }

      .nav {
        width: 70%;
        height: 45px;
        display: flex;
        justify-content: center;
        //background: #002FFF;
        .item {
          height: 40px;
          width: 50%;
          font-size: 14px;
          text-align: center;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          box-sizing: border-box;

          p {
            width: 100%;
            height: 30px;
            line-height: 40px;
            text-align: center;
            color: #999;
          }

          .active {
            color: #000;
          }

          span {
            width: 70%;
            height: 2.5px;
            border-radius: 3px;
            display: flex;
            background: #002FFF;
          }
        }
      }

    }

    .product-top {
      width: 100%;
      justify-content: space-between;

      .item-nav {
        width: 20%;
        font-size: 14px;
        text-align: left;
      }

      .center {
        width: 50px;
        display: flex;
        align-items: center;

        img {
          margin-left: 5px;
          height: 16px;
        }
      }
    }

    .product-nav-goods {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 80px;

      .item {
        position: relative;
        margin-bottom: 10px;
        width: 160px;
        min-height: 220px;
        padding: 6px;
        border: 1px solid #f6f6f6;

        .item-tip {
          position: absolute;
          right: 0;
          top: 0;
          height: 35px;
          background-position: top center;
          background: url("../../assets/image/sell.png") 50% 50%;
          border-bottom-left-radius: 50%;
          border-bottom-right-radius: 50%;
          width: 35px;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          padding: 5px 0;
          box-sizing: border-box;

          p {
            color: #fff;
            width: 100%;
            text-align: center;
            font-size: 8px;
          }
        }

        img {
          width: 160px;
          height: 160px;
        }

        .item-price {
          margin-top: 10px;
          width: 100%;
          color: #002FFF;
          font-size: 16px;
          font-weight: 500;
        }

        .item-sale {
          width: 100%;
          color: #999;
          font-size: 10px;
          margin: 5px 0;
        }

        .item-content {
          width: 100%;
          color: #000;
          font-size: 14px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -moz-box-orient: vertical;
          box-orient: vertical;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .open-menu {
      width: 100%;
      height: 100%;
      background: #f6f6f6;

      .top-title {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        font-size: 14px;
        padding: 0 0 0 5px;
        box-sizing: border-box;

        img {
          margin-right: 10px;
          height: 30px;
        }

      }

      .main {
        .item {
          padding: 0 0 0 20px;
          box-sizing: border-box;
          height: 40px;
          width: 100%;
          font-size: 12px;
          color: #333;
        }
      }

      ::-webkit-scrollbar {
        display: none;
      }

    }
  }

</style>
<style scoped>
  >>> .van-cell {
    background: none !important;
  }

  >>> .van-collapse-item__content {
    background: none !important;
  }

</style>
